import React, { Component, createContext } from 'react'
// 1.创建 跨组件的 上下文对象，大驼峰
const NameContext = createContext()
const ColorContext = createContext()
// displayName可以在开发者工具中 显示具体的名字
NameContext.displayName = 'NameContext'
ColorContext.displayName = 'ColorContext'
const Third = () => {
  return (
    <div>
      33333 - 
      {/* 3.通过 上下文对象下的 Consumer 组件获取数据，内部是一个函数，函数的参数是需要的值 */}
      <NameContext.Consumer>
        {
          (val) => {
            return (<div>{val}</div>)
          }
        }
      </NameContext.Consumer>
    </div>
  )
}
// class Third extends Component {
//   render () {
//     return (
//       <div>
//         33333 - 
//         {/* 3.通过 上下文对象下的 Consumer 组件获取数据，内部是一个函数，函数的参数是需要的值 */}
//         <NameContext.Consumer>
//           {
//             (val) => {
//               return (<div>{val}</div>)
//             }
//           }
//         </NameContext.Consumer>
//       </div>
//     )
//   }
// }

const Second = (props) => {
  return (
    <div>
      222222
      <Third/>
    </div>
  )
}
class First extends Component {
  render () {
    return (
      <div>
        1111
        <Second/>
      </div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.顶级组件中通过 上下文对象 下的 Provider 组件 配合 value 属性传值 */}
        <NameContext.Provider value = "传家宝123">
          <ColorContext.Provider value="red">
            <First />
          </ColorContext.Provider>
        </NameContext.Provider>
      </div>
    )
  }
}
